<template>
	<view class="company-page">
		<div class="company-info">
			<div class="info">
				<div class="avatar">
					<image :src="company.header" mode=""></image>
				</div>
				<div class="right">
					<h1>{{company.company}}</h1>
					<span>{{company.finance_name}}</span>
				</div>
			</div>
			<div class="labels">
				<div class="label" v-for="(item, index ) in company.tag_list">{{item.name}}</div>
			</div>
			<div class="address-wrap">
				<div class="title">公司地址</div>
				<div class="address" @click="openMap">
					<image src="../../static/image/address.png" mode=""></image>
					<span>{{company.company_city}}·{{company.company_district}}</span>
				</div> 
			</div>
			<div class="more-info">
				<div class="title">更多信息</div>
				<ul>
					<li>
						<span>公司规模</span>
						<p>{{company.scale_name}}</p>
					</li>
					<li>
						<span>公司行业</span>
						<p>{{company.job_cate_name}}</p>
					</li>
				</ul>
			</div>

		</div>
		<div class="company-post">
			<div class="title">
				<span>在招岗位</span>
				<image src="../../static/search.png" mode=""></image>
			</div>

			<div class="list">
				<div class="item" @click="() => onClickDetail(item)" v-for="(item, index ) in companyList" :key="index">
					<div class="item-title">
						<div class="info">
							<image :src="item.company_header" mode=""></image>
							<span>{{item.company_name}}</span>
						</div>
						<div class="price">{{item.salary}}</div>
					</div>
					<div class="post">
						<span>{{item.name}}</span>
						<p>{{item.show_rule[0].name || ''}} {{item.show_rule[1] && item.show_rule[1].name || ''}}</p>
					</div>
					<div class="bottom">
						<div class="labels">
							<div class="label" v-for="(label,key) in item.show_tag" :key="key">{{label.name}}</div>
						</div>
						<div class="address">{{item.company_city}}</div>
					</div>
				</div>
			</div>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				company: null, // 公司详情
				companyList: [], // 公司其他岗位
			};
		},
		onLoad({ id }) {
			this.getCompany(id)
		},
		methods: {
			// 获取公司详情
			async getCompany(id) {
				const { data } = await this.$http.Recruit.getCompany(id)
				this.company = data
				this.GetCompanyPost(id)
			},
			// 获取公司其他岗位
			async GetCompanyPost(company_id) {
				const {
					data
				} = await this.$http.Recruit.getJob({
					page: 1,
					size: 10,
					company_id
				})
				this.companyList = data.data
			},
			openMap() {
				uni.openLocation({
					latitude: Number(this.company.lat),
					longitude:Number(this.company.lon),
					complete(res) {
						console.log(res)
					}
				})
			},
			onClickDetail({
				id
			}) {
				uni.redirectTo({
					url: '/pages/index/detail?id=' + id
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	.company-page {
		padding: 0 32upx;
		margin-top: 10upx;


		.company-info {
			padding: 34upx 32upx;
			box-shadow: 0px 0px 10upx 2upx rgba(241, 241, 241, 1);
			border-radius: 8upx;

			.info {
				display: flex;
				align-items: center;
				margin-left: 4upx;

				.avatar {
					width: 123upx;
					height: 123upx;
					border-radius: 123upx;

					image {
						width: 100%;
						height: 100%;
						border-radius: 123upx;
					}
				}

				.right {
					display: flex;
					flex-direction: column;
					margin-left: 36upx;

					h1 {
						color: #28211F;
						font-size: 44upx;
						font-weight: 500;
						line-height: 44upx;
						margin-bottom: 20upx;
					}

					span {
						color: #666E7A;
						font-size: 22upx;
						line-height: 22upx;
						font-weight: 400;
						line-height: 22upx;
					}
				}
			}

			.labels {
				display: flex;
				margin-top: 36upx;
				margin-bottom: 40upx;
				flex-wrap: wrap;	

				.label {
					padding: 0 16upx;
					height: 44upx;
					line-height: 44upx;
					color: #666666;
					font-size: 24upx;
					font-weight: 400;
					margin-right: 32upx;
					background: #F2F2F2;
					border-radius: 4upx;
					margin-right: 32upx;
					margin-bottom: 10upx;
				}
			}

			.title {
				color: #28211F;
				font-size: 28upx;
				font-weight: 600;
			}

			.address-wrap {
				margin-bottom: 48upx;

				.address {
					margin-top: 16upx;
					display: flex;
					align-items: center;

					image {
						width: 30upx;
						height: 30upx;
						margin-right: 16upx;
					}

					span {
						font-size: 24upx;
						font-weight: 400;
						color: #666E7A;
					}
				}
			}

			.more-info {
				ul {
					margin-top: 32upx;

					li {
						border-bottom: 1px solid #EEEEEE;
						margin-top: 14upx;

						&:first-of-type {
							margin-top: 0;
						}

						&:last-of-type {
							border-bottom: unset;
						}

						span {
							color: #28211F;
							font-size: 26upx;
							font-weight: 400;
							line-height: 52upx;
						}

						p {
							margin-top: 4upx;
							color: #666E7A;
							font-size: 24upx;
							padding-bottom: 18upx;
							font-weight: 400;
							line-height: 48upx;
						}
					}
				}
			}
		}

		.company-post {
			padding: 32upx;
			background: #fff;
			border-radius: 8upx;
			box-shadow: 0px 0px 10px 2px rgba(241, 241, 241, 1);
			margin-bottom: 68upx;
			margin-top: 20upx;
			.title {
				display: flex;
				align-items: center;

				span {
					flex: 1;
					color: #28211F;
					font-weight: 600;
					font-size: 28upx;
				}

				image {
					width: 40upx;
					height: 40upx;
				}
			}

			.list {
				.item {
					padding-top: 32upx;
					border-bottom: 1px solid #EEEEEE;
					padding-bottom: 32upx;
					background: #fff;
					border-radius: 8upx;
					margin-bottom: 20upx;

					&:last-of-type {
						border-bottom: unset;
					}

					.item-title {
						display: flex;
						align-items: center;

						.info {
							display: flex;
							align-items: center;
							flex: 1;

							image {
								margin-right: 22upx;
								width: 40upx;
								height: 40upx;
								border-radius: 40upx;
							}

							span {
								color: #666E7A;
								font-size: 24upx;
								font-weight: 400;
							}
						}

						.price {
							color: #2AABE2;
							font-size: 28upx;
							font-weight: 600;
						}
					}

					.post {
						display: flex;
						flex-direction: column;

						span {
							margin-top: 24upx;
							font-size: 28upx;
							color: #28211F;
							font-weight: 600;
						}

						p {
							font-size: 24upx;
							color: #666E7A;
							font-weight: 400;
							margin-top: 20upx;
						}
					}

					.bottom {
						display: flex;
						align-items: center;
						margin-top: 16upx;

						.labels {
							flex: 1;
							display: flex;
							align-items: center;

							.label {
								border-radius: 4upx;
								margin-right: 16upx;
								padding: 0 16upx;
								background: #F2F2F2;
								height: 44upx;
								line-height: 44upx;
								font-size: 24upx;
								color: #666;
								font-weight: 400;
							}
						}

						.address {
							color: #666E7A;
							font-size: 22upx;
							font-weight: 400;
						}
					}
				}
			}
		}



	}
</style>
